<template>
  <div id="baidu" class="container">
    <div class="cardBox">
      <div class="card">
        <h6>昨日总浏览量</h6>
        <div>{{ totalData.pv_count }}</div>
      </div>
      <div class="card">
        <h6>昨日总访客数</h6>
        <div>{{ totalData.uv_count }}</div>
      </div>
      <div class="card">
        <h6>昨日总ip量</h6>
        <div>{{ totalData.ip_count }}</div>
      </div>
      <div class="card">
        <h6>昨日总平均访问时长</h6>
        <div>{{ totalData.avg_visit_time }}</div>
      </div>
    </div>
    <div class="search">
      <el-form ref="searchForm" :model="searchForm" inline>
        <el-form-item label="账号:">
          <el-select v-model="searchForm.accountId" placeholder="请选择" @change="handleChangeAccount">
            <el-option v-for="item in accountData" :key="item.id" :label="item.account" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="域名:">
          <el-select v-model="searchForm.site_id" placeholder="请选择" @change="handleChange">
            <el-option v-for="item in options" :key="item.site_id" :label="item.domain" :value="item.site_id" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div id="line" class="line">
      <h6>今日流量</h6>
      <el-table v-if="lineData.length > 0" :data="lineData" size="mini"
        :header-cell-style="{ 'background-color': '#fff' }">
        <el-table-column prop="title" width="125px" />
        <el-table-column label="浏览量(PV)" prop="pv_count" align="right" />
        <el-table-column label="访客数(UV)" prop="visitor_count" align="right" />
        <el-table-column label="IP数" prop="ip_count" align="right" />
        <el-table-column label="跳出率" prop="bounce_ratio" align="right">
          <template slot-scope="scope">
            <span v-if="scope.row.bounce_ratio == '--'">
              {{ scope.row.bounce_ratio }}
            </span>
            <span v-else-if="scope.row.bounce_ratio != '--'">
              {{ scope.row.bounce_ratio }}%
            </span>
          </template>
        </el-table-column>
        <el-table-column label="平均访问时长" prop="avg_visit_time" align="right" />
        <el-table-column label="转化次数" prop="trans_count" align="right" />
      </el-table>
      <el-empty v-else description="暂无数据" />
    </div>
    <el-radio-group id="radioGroup" v-model="tabPosition" class="radio-group" size="small" @change="changetime">
      <el-radio-button label="1">今天</el-radio-button>
      <el-radio-button label="2">昨天</el-radio-button>
      <el-radio-button label="3">最近7天</el-radio-button>
      <el-radio-button label="4">最近30天</el-radio-button>
    </el-radio-group>
    <div id="sem" class="content">
      <div class="left">
        <h6>趋势图</h6>
        <div class="bar" style="margin-top: 1px">
          <Trend :type="type" :site-id="siteId" />
        </div>
      </div>
      <div class="right">
        <h6>Top 10关键词</h6>
        <el-table v-if="keywordsData.length > 0" :data="keywordsData" size="mini"
          :header-cell-style="{ 'background-color': '#fff' }">
          <el-table-column label="关键词" prop="simple_proword_title" />
          <el-table-column label="浏览量(PV)" prop="cost_count" width="110px" align="right" />
          <el-table-column label="占比" prop="ratio" width="110px" align="left">
            <template slot-scope="scope">
              <el-progress :text-inside="true" :stroke-width="16" :percentage="scope.row.ratio"
                color="rgba(248,67,17,0.1)" stroke-linecap="square" />
            </template>
          </el-table-column>
        </el-table>
        <el-empty v-else description="暂无数据" />
      </div>
    </div>
    <div id="sem" class="content">
      <div class="left">
        <h6>Top10 来源网站</h6>
        <el-table v-if="sourceSite.length > 0" :data="sourceSite" size="mini"
          :header-cell-style="{ 'background-color': '#fff' }">
          <el-table-column label="来源网站" prop="simple_link_title" />
          <el-table-column label="浏览量(PV)" prop="pv_count" width="110px" align="right" />
          <el-table-column label="占比" prop="ratio" width="110px" align="left">
            <template slot-scope="scope">
              <el-progress :text-inside="true" :stroke-width="16" :percentage="scope.row.ratio"
                color="rgba(248,67,17,0.1)" stroke-linecap="square" />
            </template>
          </el-table-column>
        </el-table>
        <el-empty v-else description="暂无数据" />
      </div>
      <div class="right">
        <h6>Top10 入口页面</h6>
        <el-table v-if="landingPage.length > 0" :data="landingPage" size="mini"
          :header-cell-style="{ 'background-color': '#fff' }">
          <el-table-column label="入口页面" prop="simple_landingpage_title" />
          <el-table-column label="浏览量(PV)" prop="pv_count" width="110px" align="right" />
          <el-table-column label="占比" prop="ratio" width="110px" align="left">
            <template slot-scope="scope">
              <el-progress :text-inside="true" :stroke-width="16" :percentage="scope.row.ratio"
                color="rgba(248,67,17,0.1)" stroke-linecap="square" />
            </template>
          </el-table-column>
        </el-table>
        <el-empty v-else description="暂无数据" />
      </div>
    </div>
    <div id="sem" class="content">
      <div class="left">
        <h6>Top10 受访页面</h6>
        <el-table v-if="visitPage.length > 0" :data="visitPage" size="mini"
          :header-cell-style="{ 'background-color': '#fff' }">
          <el-table-column label="受访页面" prop="simple_visitpage_title" />
          <el-table-column label="浏览量(PV)" prop="pv_count" width="110px" align="right" />
          <el-table-column label="占比" prop="ratio" width="110px" align="left">
            <template slot-scope="scope">
              <el-progress :text-inside="true" :stroke-width="16" :percentage="scope.row.ratio"
                color="rgba(248,67,17,0.1)" stroke-linecap="square" />
            </template>
          </el-table-column>
        </el-table>
        <el-empty v-else description="暂无数据" />
      </div>
      <div class="right">
        <h6>新老访客</h6>
        <div class="visitor">
          <ul class="first-column">
            <li>
              <img :src="require('../../images/vistor.png')" alt="" />
            </li>
            <li class="second-row">浏览量</li>
            <li>访客数</li>
            <li>跳出率</li>
            <li>平均访问时长</li>
            <li>平均访问页数</li>
          </ul>
          <ul class="second-column">
            <li>
              新访客
              <div v-if="newVisitor.ratio">
                {{ newVisitor.ratio }}
                <span>%</span>
              </div>
              <div v-else>0</div>
            </li>
            <li class="second-row">{{ newVisitor.pv_count }}</li>
            <li>{{ newVisitor.visitor_count }}</li>
            <li v-if="newVisitor.bounce_ratio">
              {{ newVisitor.bounce_ratio }} %
            </li>
            <li v-else>0</li>
            <li>{{ newVisitor.avg_visit_time }}</li>
            <li>{{ newVisitor.avg_visit_pages }}</li>
          </ul>
          <ul class="last-column">
            <li>
              老访客
              <div v-if="oldVisitor.ratio">
                {{ oldVisitor.ratio }}
                <span>%</span>
              </div>
              <div v-else>0</div>
            </li>
            <li class="second-row">{{ oldVisitor.pv_count }}</li>
            <li>{{ oldVisitor.visitor_count }}</li>
            <li v-if="oldVisitor.bounce_ratio">
              {{ oldVisitor.bounce_ratio }} %
            </li>
            <li v-else>0</li>
            <li>{{ oldVisitor.avg_visit_time }}</li>
            <li>{{ oldVisitor.avg_visit_pages }}</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <h6>访客属性-年龄分布</h6>
        <div ref="echart" class="bar">
          <Bar v-if="show" :site-id="siteId" />
        </div>
      </div>
      <div class="right">
        <h6>地域分布</h6>
        <div class="bar">
          <Map v-if="show" :site-id="siteId" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import semApi from '@/api/baidu'
import Bar from './components/barChart'
import Map from './components/mapChart.vue'
import Trend from './components/trendChart.vue'
import websiteApi from '@/api/website'
import log from '@/api/log'
export default {
  components: { Bar, Map, Trend },
  data() {
    return {
      accountId: 0,
      accountData: [],
      totalData: {
        pv_count: '0',
        uv_count: '0',
        ip_count: '0',
        avg_visit_time: '00:00:00'
      },
      searchForm: {
        accountId: '',
        domain: '',
        site_id: ''
      },
      siteId: '',
      tabPosition: '1',
      show: false,
      lineData: [], // 今日流量
      keywordsData: [], // Top10关键词
      visitPage: [], // 受访页面
      landingPage: [], // 入口页面
      sourceSite: [], // 来源网站页面
      newVisitor: [], // 新用户
      oldVisitor: [], // 老用户
      type: 1, // 时间段的类型
      options: []
    }
  },
  // computed: {
  //   siteId1() {
  //     return this.$store.getters.siteId
  //   }
  // },
  // watch: {
  //   siteId1(val, value) {
  //     this.siteId = val
  //     this.getLine()
  //     this.getQxt()
  //     this.getCommon()
  //   }
  // },
  created() {
    this.getBaidu()
    // this.siteId = this.$store.getters.siteId
    // this.getLine()
    // this.getQxt()
    // this.getCommon()
  },
  mounted() {
    window.addEventListener('scroll', this.showEchart, true)
  },
  destroyed() {
    window.removeEventListener('scroll', this.showEchart, true)
  },
  methods: {
    getBaidu() {
      semApi.baidu().then(res => {
        if (res.code == 0) {
          this.accountData = res.data.account
          this.totalData = res.data.pvData

          if (this.accountData) {
            this.accountId = this.accountData[0].id
            this.searchForm.accountId = this.accountData[0].id
          }

          this.$nextTick(() => {
            this.getWeblist()
          })
        }
      })
    },
    // // 获取站点列表
    getWeblist() {
      semApi.webList({ id: this.accountId }).then(res => {
        if (res.code == 0) {
          this.options = res.data
          this.searchForm.site_id = res.data[0].site_id
          this.siteId = res.data[0].site_id
          // this.handleChange()
          this.$nextTick(() => {
            this.getLine()
            this.getQxt()
            this.getCommon()
          })
        }
      })
    },
    handleChangeAccount(val) {
      this.searchForm.accountId = val
      this.accountId = val
      this.getWeblist()
    },
    // // 切换站点
    handleChange(val) {
      // this.getColumnlist(this.searchForm.website_id)
      this.searchForm.site_id = val
      this.siteId = val
      this.$nextTick(() => {
        this.getLine()
        this.getQxt()
        this.getCommon()
      })
    },
    // 切换时间段
    changetime(val) {
      this.type = val
      this.getQxt()
    },
    // 趋势图
    getQxt() {
      const val = {
        id: this.accountId,
        type: this.type,
        site_id: this.siteId,
        metrics: 'pv_count'
      }
      semApi.qxtList(val).then(res => { })
    },
    showEchart() {
      // const that = this
      // 垂直滚动的值兼容问题
      const scrollTopE =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      // 屏幕的高度
      const screenHeight = window.screen.availHeight
      // 判断是否滚动到目标区域范围内
      if (
        this.$refs.echart.offsetTop - screenHeight > scrollTopE &&
        scrollTopE <
        this.$refs.echart.offsetTop + this.$refs.echart.offsetHeight
      ) {
        this.show = false
      } else {
        this.show = true
      }
    },
    // 今日流量
    getLine() {
      semApi
        .lineList({ id: this.accountId, site_id: this.siteId })
        .then(res => {
          if (res.code == 0) {
            const data1 = res.data.fields
            const data2 = res.data.items
            const data3 = []
            const obj = {}
            for (var x = 0; x < data2.length; x++) {
              if (x == 2) {
                data3.push({
                  title: data2[x][0],
                  pv_count: data2[x][1].val,
                  visitor_count: data2[x][2].val,
                  ip_count: data2[x][3].val,
                  bounce_ratio: data2[x][4].val,
                  avg_visit_time: data2[x][5].val,
                  trans_count: data2[x][6].val
                })
              } else {
                data3.push({
                  title: data2[x][0],
                  pv_count: data2[x][1],
                  visitor_count: data2[x][2],
                  ip_count: data2[x][3],
                  bounce_ratio: data2[x][4],
                  avg_visit_time: data2[x][5],
                  trans_count: data2[x][6]
                })
              }
            }
            this.lineData = data3.splice(0, 3)
          } else {
            this.$message.error('统计分析配置异常，请检查')
          }
        })
    },
    // 网站概况
    getCommon() {
      this.keywordsData = []
      this.landingPage = []
      this.visitPage = []
      this.sourceSite = []
      semApi
        .commonList({ id: this.accountId, site_id: this.siteId })
        .then(res => {
          // res.data.word.items.forEach(el => {
          //   this.keywordsData.push({
          //     simple_proword_title: el[0],
          //     cost_count: el[1],
          //     ratio: el[2]
          //   })
          // })
          // 受访页面
          res.data.visitPage.items.forEach(el => {
            this.visitPage.push({
              simple_visitpage_title: el[0],
              pv_count: el[1],
              ratio: el[2]
            })
          })
          // 入口页面
          res.data.landingPage.items.forEach(el => {
            this.landingPage.push({
              simple_landingpage_title: el[0],
              pv_count: el[1],
              ratio: el[2]
            })
          })
          // 来源网站页面
          res.data.sourceSite.items.forEach(el => {
            this.sourceSite.push({
              simple_link_title: el[0],
              pv_count: el[1],
              ratio: el[2]
            })
          })
          this.newVisitor = res.data.visitType.newVisitor
          this.oldVisitor = res.data.visitType.oldVisitor
        })

      semApi
        .KeywordsList({ id: this.accountId, type: 1, site_id: this.siteId })
        .then(res => {
          if (res.code == 0) {
            res.data.items[0].forEach((el, k) => {
              this.keywordsData.push({
                simple_proword_title: el[0].name,
                cost_count: res.data.items[1][k][1],
                ratio: res.data.items[1][k][2]
              })
            })
          }
        })
    }
  }
}
</script>

<style lang="scss">
#baidu {
  .container {
    margin-bottom: 40px;
  }

  .el-table .cell {
    white-space: nowrap;
  }

  .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    background-color: var(--huocms-com-color-primary);
    box-shadow: none;
    color: #fff;
  }

  .el-radio-button__inner:hover {
    color: var(--huocms-com-color-primary);
  }

  .el-menu--horizontal>.el-menu-item.is-active {
    background-color: var(--huocms-com-color-primary) !important;
    color: #fff !important;
  }

  .elmenu .el-submenu.is-active .el-submenu__title {
    background-color: var(--huocms-com-color-primary) !important;
    color: #fff !important;

    .el-submenu__icon-arrow.el-icon-arrow-down {
      color: #fff !important;
    }
  }
}

#line {

  .el-table td,
  .el-table th.is-leaf {
    border: none;
  }

  .el-table {
    border-bottom: solid 1px #eee;
    padding-bottom: 20px;
    color: #323437;
  }

  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #fff;
  }

  .el-table__body .el-table__row td {
    border-right: solid 1px #eee;
  }

  .el-table::before {
    height: 0;
  }

  .el-table__body .el-table__row td:last-child,
  .el-table__header .el-table_1_column_7.is-right {
    border-right: none;
    padding-right: 30px;
  }

  .el-table__body .el-table__row td:first-child {
    padding-left: 12px;
  }

  .el-table th.is-right,
  .el-table td.is-right {
    padding-right: 10px;
  }

  // 第一行加粗
  .el-table__body .el-table__row:first-child .is-right {
    font-weight: bold;
    font-size: 16px;
    color: #111314;
  }
}

#radioGroup.el-radio-group {
  line-height: 29px;
}

#radioGroup.el-radio-group {
  .el-radio-button__inner {
    border: none;
    border-right: solid 1px #eee;
  }

  .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0;
  }

  .el-radio-button:first-child .el-radio-button__inner {
    border-radius: 0;
  }
}

#sem {
  .el-table {
    color: #323437;
  }

  .el-table td,
  .el-table th.is-leaf {
    border: none;
  }

  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #fff;
  }

  .el-table--enable-row-hover .el-table__body tr>td {
    height: 31px;
  }

  .el-table--mini td {
    padding: 0;
  }

  .el-table::before {
    height: 0;
  }

  .el-table__header thead th {
    color: #787a7d;
  }

  .el-progress-bar__inner,
  .el-progress-bar__outer {
    border-radius: 0;
    background-color: #fff;
  }

  .el-progress-bar__innerText {
    color: #323437;
  }
}
</style>
<style scoped lang="scss">
.container {
  margin-bottom: 40px;
}

.cardBox {
  display: block;
  text-align: center;
  padding: 0 20px 20px;
  font-size: 0;

  .card {
    box-sizing: border-box;
    display: inline-block;
    margin: 0 2.5%;
    width: 20%;
    vertical-align: middle;
    background-color: #fff;
    font-size: 14px;
    padding: 50px 2%;

    h6 {
      line-height: 30px;
      font-weight: normal;
    }

    div {
      font-size: 18px;
      line-height: 36px;
      font-weight: 500;
    }
  }
}

.line {
  background-color: #fff;
  padding: 20px 0 30px;
  border: solid 1px #eee;

  h6 {
    margin-left: 20px;
  }
}

h6 {
  font-size: 14px;
}

.search {
  min-width: 1350px;
  background-color: #fff;
  padding: 20px 30px 0px;
  border-radius: 5px;
}

.radio-group {
  margin: 20px 0 0 0;
  width: 100%;
  border: solid 1px #eee;
  background-color: #fff;
}

.content {
  margin-top: 20px;
  margin-bottom: 20px;
  height: 413px;

  h6 {
    margin-bottom: 20px;
  }

  .left,
  .right {
    width: calc(50% - 20px);
    float: left;
    background-color: #fff;
    padding: 20px;
    border: solid 1px #eee;
    border-radius: 5px;
    height: 415px;

    @media (max-width: 1200px) {
      width: 100%;
      margin-bottom: 20px;
    }
  }

  .right {
    @media (max-width: 1200px) {
      width: 100%;
      margin-bottom: 60px;
    }
  }

  .left {
    margin-right: 40px;
  }

  .right {
    .visitor {
      display: flex;
      justify-content: space-between;
      flex-basis: auto;
      margin-top: 50px;

      ul {
        list-style-type: none;
        flex-grow: 1;

        li {
          border-bottom: solid 1px #eee;
          border-right: solid 1px #eee;
          padding-left: 20px;
          height: 40px;
          line-height: 40px;
          font-size: 12px;
          color: #414448;
        }
      }

      ul.first-column li {
        border-left: solid 1px #eee;
        text-align: center;
        padding-left: 0;
        color: #787a7d;
      }

      ul.second-column li:first-child {
        border-left: solid 1px #eee;
        border-right: solid 1px #eee;
        line-height: 30px;

        div {
          color: #f83600;
          font-family: PingFang-SC-Bold;
          font-size: 30px;

          span {
            font-size: 18px;
          }
        }
      }

      ul.last-column li:first-child {
        line-height: 30px;

        div {
          font-family: PingFang-SC-Bold;
          color: #fe872b;
          font-size: 30px;

          span {
            font-size: 18px;
          }
        }
      }

      ul.first-column li:first-child {
        border-left: none;
      }

      li.second-row {
        border-top: solid 1px #eee;
      }

      // ul.last-column li:first-child{
      //   border-right: none;
      // }
      ul li:first-child {
        height: 71px;
        border: none;
        margin-bottom: 33px;
        font-size: 16px;
        color: #5d5d61;
      }
    }
  }
}

.bar {
  width: 100%;
  margin-top: -20px;
}
</style>
